//colors

@mixin expecedColors($r,$g,$b) {
 @if $r {
	& {
		color: $r !important;
	}
}
	& {
		color: $r !important;
	}
	&-70 {
		color: $g !important;
	}
	&-50 {
		color: $b !important;
	}

	&-bg {
		background: $r !important;
	}
	&-bg-50 {
		background: $b !important;
	}
	&-bg-70 {
		background: $g !important;
	}
}

//flex
@mixin flexCenter($align) {
	display: flex;
	justify-content: $align;
	align-items: $align;
	flex-direction: row;
	flex-wrap: nowrap;
}

@mixin transitionAll5($align:0.5s,$obj:all) {
	transition: $obj $align;
}

@mixin arrowTransition($time, $rotate) {
	-webkit-transform: rotate($rotate);
	transform: rotate($rotate);
	transition: -webkit-transform $time;
	transition: transform $time, -webkit-transform $time;
}

@mixin roll() {
	& > ul {
		position: absolute;
		top: calc(100% + 0.571rem);
		min-width: 100%;
		padding: 0;
		right: 0;
		color: #505C73;
		background: #FFFFFF;
		box-shadow: 0px 7px 64px rgba(44, 60, 89, 0.07);
		border-radius: 6px;
		list-style: none;
		text-decoration: none;
		overflow-x: hidden;
		overflow-y: auto;
		max-height: 15.714rem;
		@include rollBackground;
		li {
			font-size: 1rem;
			text-align: left;
			list-style: none;
			cursor: pointer;
			padding: 0.9286rem 1rem;
			&:hover {
				background: #E9EBEF;
			}
		}
	}
}

@mixin rollBackground() {
	&::-webkit-scrollbar {
		width: 5px;
		height: 1px;
	}
	&::-webkit-scrollbar-thumb {
		border-radius: 6px;
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
		background: #56A7FD;
	}
	&::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
		border-radius: 2px;
		background: #EDEDED;
	}
}

@mixin placeholder() {
	&::-webkit-input-placeholder {
		color: #D3D8DE;
	}
	&:-moz-placeholder {
		color: #D3D8DE;
	}
	&::-moz-placeholder {
		color: #D3D8DE;
	}
	&:-ms-input-placeholder {
		color: #D3D8DE;
	}
}
